<!--
 * @Author: songleiluo 361215740@qq.com
 * @Date: 2024-01-07 12:04:56
 * @LastEditors: songleiluo 361215740@qq.com
 * @LastEditTime: 2024-01-28 12:37:47
 * @FilePath: \dxhospital\src\pages\patient\patient.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
        status-icon>
        <el-container class="patient-form-container">
            <el-form-item label="姓名" prop="name" class="patient-form-container-item">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="性别" prop="sex" class="patient-form-container-item">
                <el-input v-model="ruleForm.sex" />
            </el-form-item>
            <el-form-item label="年龄" prop="age" class="patient-form-container-item">
                <el-input v-model="ruleForm.age" />
            </el-form-item>
            <el-form-item label="民族" prop="nation" class="patient-form-container-item">
                <el-input v-model="ruleForm.nation" />
            </el-form-item>
            <el-form-item label="职业" prop="profession" class="patient-form-container-item">
                <el-input v-model="ruleForm.profession" />
            </el-form-item>
            <el-form-item label="教育程度" prop="education" class="patient-form-container-item">
                <el-input v-model="ruleForm.education" />
            </el-form-item>
            <el-form-item label="宗教信仰" prop="religion" class="patient-form-container-item">
                <el-input v-model="ruleForm.religion" />
            </el-form-item>
            <el-form-item label="婚姻" prop="marriage" class="patient-form-container-item">
                <el-input v-model="ruleForm.marriage" />
            </el-form-item>
            <el-form-item label="医疗支付" prop="defray" class="patient-form-container-item">
                <el-input v-model="ruleForm.defray" />
            </el-form-item>
            <el-form-item label="个人收入" prop="income" class="patient-form-container-item">
                <el-input v-model="ruleForm.income" />
            </el-form-item>
            <el-form-item label="居住情况" prop="residence" class="patient-form-container-item">
                <el-input v-model="ruleForm.residence" />
            </el-form-item>
            <el-form-item label="主要照顾者" prop="carer" class="patient-form-container-item">
                <el-input v-model="ruleForm.carer" />
            </el-form-item>
            <el-form-item label="出生日期" prop="bornDate" class="patient-form-container-item">
                <el-input v-model="ruleForm.bornDate" />
            </el-form-item>
            <el-form-item label="身份证号" prop="identityCardNo" class="patient-form-container-item">
                <el-input v-model="ruleForm.identityCardNo" />
            </el-form-item>
            <el-form-item label="联系电话" prop="tel" class="patient-form-container-item">
                <el-input v-model="ruleForm.tel" />
            </el-form-item>
            <el-form-item label="家庭住址" prop="address" class="patient-form-container-item">
                <el-input v-model="ruleForm.address" />
            </el-form-item>
            <el-form-item label="收案时间" prop="collectionTime" class="patient-form-container-item">
                <el-input v-model="ruleForm.collectionTime" />
            </el-form-item>
        </el-container>
    </el-form>
</template>

<script lang="ts" setup >
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
    name: string;
    age: number;
    sex:string;
    "nation":string;
	 "profession":string;
	 "education":string;
	 "religion":string;
	 "marriage":string;
	 "defray":number;
	 "income":number;
	 "residence":string;
	 "carer":string;
	 "bornDate":string;
	 "address":string;
	 "identityCardNo":string;
	 "tel":string;
     admissionDate?:string;
}


const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    "name":"jemmy",
	 "sex":"男",
	 "age":26,
	 "nation":"汉",
	 "profession":"自由职业",
	 "education":"本科",
	 "religion":"无",
	 "marriage":"未婚",
	 "defray":5000,
	 "income":12000,
	 "residence":"西安市",
	 "carer":"王五",
	 "bornDate":"1990-01-02",
	 "address":"西安市",
	 "identityCardNo":"6105281995010249852",
	 "tel":"15678964396"
})
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    age: [{ required: true, message: 'Please input age', trigger: 'blur' },],
    sex:[{ required: true, message: 'Please input age', trigger: 'blur' },]
})



</script>

<style scoped lang='scss'>

.patient-form-container {
    width:100%;
    display: flex;
    flex-direction:row;
    
    justify-content: flex-start;
    flex-wrap:  wrap;
    align-content:flex-start;
    .patient-form-container-item{
        width:25%;
    }
}

</style>